<template>
	<div id="app">
		<h1 ref="h1">app</h1>
		<one ref="one">
			<!--标签设置slot="自定义名"，内部使用slot标签name="自定义名"-->
			<two slot="flag"></two>
			<!--没有设置slot属性，内部直接使用<slot></slot>会渲染没有设置slot属性的标签-->
			<h2 style="padding: 10px;border: 1px solid #CD5C5C;">未使用slot属性</h2>
		</one>
		<h2 class="btn" @click="changeone()">改变one的值</h2>
	</div>
</template>

<script>
import one from "./one.vue"
import two from "./two.vue"

export default {
  name: 'app',
  data () {
    return {
    	
    }
  },
  methods:{
  	changeone(){
	  	//通过ref获取组件实例，操作子组件内部的函数
	  	this.$refs.one.change()
  	}
  },
  components: {
  	one,
  	two
  },
  mounted(){
  	//通过ref获取dom结构
  	console.log(this.$refs.h1)
  	//通过ref获取组件实例
  	console.log(this.$refs.one)
  }
}
</script>

<style>
#app{
	padding: 10px;
	border: 1px solid #CD5C5C;
}	
.btn{
	cursor: pointer;
}
</style>
